<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {login} from "@/api/login.js";

const $router = useRouter();

const loginForm = ref({
  username: '',
  password: ''
});

const handleLogin = async () => {
  console.log('登录表单数据：', loginForm.value);
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入登录账号和密码');
    return;
  }
  const request = {
    username: loginForm.value.username,
    password: loginForm.value.password
  };
  await login(request).then(res => {
    console.log('--->', res);
    localStorage.setItem('blog-token', res?.data)
    ElMessage.success('登录成功');
    const timer = setTimeout(() => {
      clearTimeout(timer);
      $router.push('/admin');
    }, 300);
  }).catch(err => {
    console.log(err)
  });
};
</script>
<template>
  <div class="login-container">
    <div class="login-form-box">
      <h2>博客系统登录</h2>
      <div class="login-form-group">
        <label for="username">登录账号</label>
        <el-input v-model="loginForm.username" placeholder="请输入登录账号"/>
      </div>
      <div class="login-form-group">
        <label for="password">登录密码</label>
        <el-input v-model="loginForm.password" placeholder="请输入登录密码"/>
      </div>
      <div class="login-form-group">
        <el-button @click="handleLogin" color="#626aef" dark>立即登录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .login-form-box {
    box-sizing: border-box;
    padding: 40px;
    width: 450px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    
    > h2 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
}

.login-form-group {
  margin-bottom: 15px;
  
  label {
    display: block;
    margin-bottom: 10px;
  }
  
  button {
    width: 100%;
  }
}
</style>